<template>
  <div>
    <el-card>
      <p>订单管理</p>
      <div class="searchArea flex">
        <el-form
          ref="serachForm"
          :model="searchForm"
          :inline="true"
          style="width:90%"
          label-position="left"
          label-width="90px"
        >
          <el-form-item label="物流单号" prop="expressNum" style="width:30%">
            <el-input v-model="searchForm.expressNum" placeholder="请输入物流单号"></el-input>
          </el-form-item>
          <el-form-item label="订单时间" prop="timeRange" style="width:50%">
            <el-date-picker
              v-model="searchForm.timeRange"
              clearable
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="订单编号" prop="orderNum" style="width:30%">
            <el-input v-model="searchForm.orderNum" placeholder="请输入订单编号"></el-input>
          </el-form-item>
          <el-form-item label="收货联系人" prop="name" style="width:30%">
            <el-input v-model="searchForm.name" placeholder="请输入收货联系人"></el-input>
          </el-form-item>
          <el-form-item label="收货方电话" prop="mobile" style="width:30%">
            <el-input v-model="searchForm.mobile" placeholder="请输入收货方电话"></el-input>
          </el-form-item>
          <el-form-item prop="action" style="width:10%">
            <el-button type='primary' @click="getOrderList">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tableBox">
        <el-table :data="tableData" style="width: 100%" height="500" stripe>
          <el-table-column prop="orderTime" label="订单时间" align="center"></el-table-column>
          <el-table-column prop="orderId" label="订单号" align="center"></el-table-column>
          <el-table-column prop="realName" label="用户名" align="center"></el-table-column>
          <el-table-column prop="organization" label="公司名称/个人" align="center"></el-table-column>
          <el-table-column prop="totalNum" label="购买数量" align="center"></el-table-column>
          <el-table-column prop="totalPrice" label="订单金额" align="center"></el-table-column>
          <el-table-column prop="userPhone" label="收件人电话" align="center"></el-table-column>
          <el-table-column prop="userAddress" label="收件地址" align="center"></el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="120">
            <template slot-scope="scope">
             <el-button
                type="primary"
                size="mini"
                @click="checkDetail(scope.row,scope.$index)"
              >订单详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="text-align:center;margin-top:20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  S_ORDER_LIST
} from '@/utils/api';
export default {
  data() {
    return {
      searchForm: {
        expressNum: null,
        timeRange: [],
        name: null,
        orderPlateform: null,
        orderNum: null,
        mobile: null
      },
      tableData: [
      ],
      currentPage: 1,
      pageSize: 10,
      total: 50
    };
  },
  methods: {
    checkDetail(row, index) {
      this.$router.push({
        path: "orderDetail",
        query: {
          data: row,
          handler: "check"
        }
      });
    },
    getOrderList(){
      if(!this.searchForm.timeRange[0]){
        this.$message.error('请输入日期')
        return
      }
      S_ORDER_LIST({ 
          expressNum:this.searchForm.expressNum,
          orderNum:this.searchForm.orderNum,
          mobile:this.searchForm.mobile,
          name:this.searchForm.name,
          startTime:new Date(this.searchForm.timeRange[0]).getTime()/1000,
          endTime:new Date(this.searchForm.timeRange[1]).getTime()/1000,
          pageNo: this.currentPage,
          pageSize: this.pageSize
      }).then(res => {
          this.tableData = res.data.dataList
          this.Total = res.data.count
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNo=val
      this.getOrderList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage=val
      this.getOrderList()
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  font-size: 20px;
  padding: 10px 0;
}
.searchArea {
  width: 100%;
  padding: 15px 0;
  margin-top: 15px;
  justify-content: center;
  background: #eee;
}
.tableBox {
  width: 100%;
  background: #fff;
  margin-top: 15px;
  padding: 10px 2px;
  border-radius: 5px;
  // box-shadow: 2px 3px 15px 0 #ccc;
}
</style>